<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!--标题栏图标-->
    <link rel="icon" href="../../static/images/Common/favicon.ico" th:href="@{/images/Common/favicon.ico}"
          type="images/x-ico"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me-common.css" th:href="@{/css/me-common.css}">
    <link rel="stylesheet" href="../../static/css/me-special.css" th:href="@{/css/me-special.css}">
    <link rel="stylesheet" href="../../static/css/me-media.css" th:href="@{/css/me-media.css}">
</head>
<body>

<!------导航------>
<!--inverted:颜色反转；attached消除圆角-->
<nav th:replace="admin/_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <img src="../../static/images/Common/logo_row_simple.png" th:src="@{/images/Common/logo_row_simple.png}"
                 class="left float image m-margin-right-middle" height="50px" alt="">
            <a href="../index.html" class="m-item item m-mobile-hide"><i class="home icon m-margin-right-no"></i>首页</a>
            <a href="../categories.html" class="m-item item m-mobile-hide"><i
                    class="folder open icon m-margin-right-no"></i>分类</a>
            <a href="../tags.html" class="m-item item m-mobile-hide"><i class="tags icon m-margin-right-no"></i>标签</a>
            <a href="../archives.html" class="m-item item m-mobile-hide"><i class="archive icon m-margin-right-no"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="heartbeat icon m-margin-right-no"></i>娱乐<i
                    class="angle down icon m-margin-right-no "></i></a>
            <a href="../links.html" class="m-item item m-mobile-hide"><i
                    class="linkify icon m-margin-right-no"></i>外链</a>
            <a href="../about.html" class="m-item item m-mobile-hide"><i class="user icon m-margin-right-no"></i>关于我</a>
            <div class="right m-item m-mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text">
                        <img src="../../static/images/Common/avatar.png" th:src="@{/images/Common/avatar.png}" alt=""
                             class="ui avatar image">
                        Phoenix
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">退出登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui black menu toggle icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>


<main class="ui m-container">
    <div class="ui container">

        <div class="ui segment m-padded-big">
            <h1>个人中心</h1>
            <div class="ui grid">
                <div class="four wide column">
                    <th:block th:replace="admin/_fragments :: userCenter(2)">
                        <div class="ui secondary vertical pointing menu" style="text-align: right">
                            <a class="item active">个人信息</a>
                            <a class="item">修改密码</a>
                        </div>
                    </th:block>
                </div>
                <div class="twelve wide stretched column">
                    <form class="ui form">
                        <div class="required field">
                            <label>原密码</label>
                            <input type="password" name="oldPassword" placeholder="请输入原来的密码">
                        </div>
                        <div class="required field">
                            <label>新密码</label>
                            <input type="password" name="newPassword" placeholder="请输入新的密码">
                        </div>
                        <div class="required field">
                            <label>确认密码</label>
                            <input type="password" name="newPasswordCheck" placeholder="请再次输入新的密码">
                        </div>


                        <div class="ui error message"></div>

                        <div class="m-margin-top-large">
                            <button class="ui positive button" type="reset">清空表单</button>
                            <button class="ui negative button" type="button" onclick="ajaxChangePassword()">修改密码
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</main>


<div class="ui mini change-password modal">
    <div class="header">修改密码</div>
    <div class="content">
        <span id="status" hidden></span>
        <span id="desc"></span>
    </div>
    <div class="actions">
        <div class="ui positive right labeled icon button"><font style="vertical-align: inherit;"><font
                style="vertical-align: inherit;">确认</font></font><i class="checkmark icon"></i></div>
    </div>
</div>


<!------底部footer------>
<footer th:replace="admin/_fragments :: footer">
    <!--底部teal颜色的条-->
    <div class="ui segment vertical teal inverted m-padded-tb-mini "></div>
    <!--底部footer正文-->
    <div class="ui inverted vertical segment m-padded-tb-big">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--QQ微信联系方式二维码及打赏二维码占六个栅栏-->
                <div class="five wide center aligned column m-children-center">
                    <!--QQ联系方式二维码-->
                    <div class="m-inline-block m-margin-right-small">
                        <img src="../../static/images/Common/QQ.png" th:src="@{/images/Common/QQ.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini">我的QQ</span>
                    </div>
                    <!--微信联系方式二维码-->
                    <div class="m-inline-block m-margin-right-small">
                        <img src="../../static/images/Common/WeChat.png" th:src="@{/images/Common/WeChat.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini">我的微信</span>
                    </div>
                    <!--打赏方式二维码-->
                    <div class="m-inline-block">
                        <img src="../../static/images/Common/Pay.png" th:src="@{/images/Common/Pay.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini" style="color: red">打赏</span>
                    </div>
                </div>
                <!--站点声明文字表述战11个栅栏-->
                <div class="eleven wide left aligned column ">
                    <h4 class="ui teal header">站点声明：</h4>
                    <p class="m-opacity-mini">1.文中的商标及图像版权属于其合法持有人，只供传递信息之用，非商务用途。交流时请遵守理性，宽容的原则。</p>
                    <p class="m-opacity-mini">2.所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。</p>
                    <p class="m-opacity-mini">Copyright © 2020 xinglongfei.cn. Designed by Phoenix.
                        备案号：京ICP备xxxxxxxx号-x </p>
                </div>
            </div>
        </div>
    </div>
</footer>

<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    var formValidate;
    $('.ui.form').form({
        fields: {
            oldPassword: {
                identifier: 'oldPassword',
                rules: [{
                    type: 'empty',
                    prompt: '请输入原密码！'
                }]
            },
            newPassword: {
                identifier: 'newPassword',
                rules: [{
                    type: 'empty',
                    prompt: '请输入新密码！'
                }]
            },
            passwordEqual: {
                identifier: 'newPasswordCheck',
                rules: [{
                    type: 'match[newPassword]',
                    prompt: '两次输入的密码不一致！'
                }]
            },
            newPasswordCheck: {
                identifier: 'newPasswordCheck',
                rules: [{
                    type: 'empty',
                    prompt: '请再次输入新密码！'
                }]
            },
        },
    });


    function ajaxChangePassword() {
        //如果表单验证失败，则提示错误并不再执行
        if (!$('.ui.form').form('validate form')) {
            return false;
        }
        $.ajax({
            url: "/admin/user/changePassword",
            method: "post",
            data: {
                oldPassword: $('[name="oldPassword"]').val(),
                newPassword: $('[name="newPassword"]').val()
            },
            dataType: "json",
            success: function (data) {
                showchangePasswordDialog(data);
            }
        });
    }

    function showchangePasswordDialog(data) {
        var status  = JSON.stringify(data.status).replace("\"","").replace("\"","");
        var desc = JSON.stringify(data.desc).replace("\"","").replace("\"","");
        $('.ui.mini.change-password.modal')
            .modal('setting', 'closable', false)
            .modal({ //各种回调方法
                onShow: function () {
                    $('#status')[0].innerText = status;
                    if (status === "200") {
                        $('#desc')[0].innerText = desc+"，请使用新密码重新登录账号进行其他操作！";
                    }else{
                        $('#desc')[0].innerText = desc;
                    }
                },
                onApprove: function () {  //单击确认按钮
                    if (status === "200") {
                        window.location = "/admin/logout";
                    }
                },
            })
            .modal('show')
        ;
    }

</script>

</body>
</html>